<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件基础知识点</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app1">
			<vue-com></vue-com>
		</div>
		<div id="app">
			<test></test>
			<button-counter title="活着" @clickfuncnow='clickfuncnow'></button-counter>
			<button-counter title="许三观卖血记"></button-counter>
		</div>
		<script type="text/javascript">
			Vue.component("button-counter", { //全局注册组件
				data: function() { //这里必须是使用方法来返回一个对象， 这样才可以做到组件的复用性
					return {
						counter: 0
					}
				},
				props: ['title'], //组件参数
				template: '<button type="button" @click="clickfun" >{{title}}你点击了{{counter}}次</button>',
				methods: {
					clickfun: function() {
						this.counter++
						this.$emit('clickfuncnow', this.counter,'yyt')//这里是传给上一级方法
					}
				}
			})
			
			Vue.component("vue-com",{
				template:"<b>abcd</b>"
			})

			var data = {};
			var v = new Vue({
				el: "#app",
				data: {},
				methods: {
					clickfuncnow: function(e,name) {
						console.log(e,name)
					}
				},components:{//局部注册
					test:{
						template:"<b>123</b>"
					}
				}
			});
			
			var v=new Vue({
				el:"#app1"
			})
		</script>
	</body>
</html>
